<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./icons/iconfont.css">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="content">
    <div id="main"></div>
    <div id="menu">
      <div class="bar">
        <!-- 4.x 默认第一个 tab栏 处于"活跃状态"： -->
        <!-- 细节1：设置 自定义属性-"data-xxx" ->便于获取供JS使用！！！ -->
        <div class="item active-item" data-index=1 data-atr="menuLink">
          <span class="icon">
            <i class="iconfont icon-a-1_daibanshixiang"></i>
          </span>
          <span class="text">home</span>
        </div>
        <div class="item" data-index=2 data-atr="menuLink">
          <span class="icon">
            <i class="iconfont icon-a-1_daohang-moren"></i>
          </span>
          <span class="text">edit</span>
        </div>
        <div class="item" data-index=3 data-atr="menuLink">
          <span class="icon">
            <i class="iconfont icon-a-1_gerenziliao"></i>
          </span>
          <span class="text">profile</span>
        </div>
      </div>

      <!-- 1. 遮罩层 -->
      <div class="active-box-filter"></div>
    </div>
  </div>

  <script>
    let barNode = document.querySelector('.bar')
    barNode.addEventListener("click", nodeClick, false)

    function nodeClick(e) {
      // console.log(e)
      let currentNode; // 5. 定义一变量, 方便之后获取到所有 item项.
      let filterNode = document.querySelector(".active-box-filter")

      // 6. 如果当前用户点击的是 tab菜单栏, 则将当前所点项, 赋给 currentNode
      if (e.target.dataset.atr == "menuLink") {
        currentNode = e.target;
      } else if (e.target.parentNode.dataset.atr == "menuLink") {
        currentNode = e.target.parentNode
      }
      
      // 7. 否则, 用户未点击 tab菜单栏, 则不进行其他操作...
      if (currentNode == undefined) return false;

      // 8. 从用户点击 tab菜单栏 中,  获取所有的 item每项.
      // childNode是一个NodeList, 其自带一个forEach方法
      let childNode = document.querySelectorAll(".item");

      // 9. 给每项item, 通过获取 ->dataset上的index, 
      // 点了哪一项, 决定给谁加上 "活跃类名" (排他思想...)
      childNode.forEach((node, index) => {
        if (node.dataset.index !== currentNode.dataset.index) {
          node.className = "item"
        } else {
          node.className = "item active-item"
          filterNode.style["transform"] = `translateX(${110*(node.dataset.index-1)}%)`
        }
      })
    }
  </script>

</body>
</html>